<template>
  <div class="app-container">
    <div class="app-container__body">
      <el-row class="search-box clearfix">
        <el-col :offset="16" :span="8" class="btns">
          <el-button icon="el-icon-edit-outline" type="borderCyan" @click="$router.push({name: 'IndexDetail'})">添加账号</el-button>
        </el-col>
      </el-row>
      <div class="gridtable-box">
        <el-table class="gridtable" :data="indexList" >
          <el-table-column prop="id" label="id" align="center" width="180"></el-table-column>
          <el-table-column prop="phone" label="登录手机号(推荐)" align="center" width="180"></el-table-column>
          <el-table-column prop="username" label="登录账号" align="center" width="90"></el-table-column>
          <el-table-column prop="publishing.name" label="出版社名称" align="center" width="120"></el-table-column>
          <el-table-column prop="name" label="联系人姓名" align="center" width="120"></el-table-column>
          <el-table-column prop="publishing.linkUrl" label="店铺地址" align="center" min-width="200">
            <template slot-scope="scope">
              {{scope.row.publishing.linkUrl}}
              <el-button size="mini" class="tag" type="borderCyan" :data-clipboard-text="scope.row.publishing.linkUrl" @click="copy(scope.row.publishing.linkUrl,$event)">复制</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="createAt" label="生成时间" align="center" width="150">
            <template slot-scope="scope">
              <span>{{formatDate(scope.row.createAt)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" class-name="opt-col" >
            <template slot-scope="scope">
              <el-button type="text" @click="$router.push({name: 'IndexDetail',query:{id:scope.row.id}})" size="mini"><i class="el-icon-edit"></i>修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="grid-pager" @current-change="handleCurrentChange" v-if="total>0"
                       :current-page="params.page.page" next-text="下一页"
                       :page-size="  params.page.pageSize" :total="total" layout=" prev, pager, next,total,jumper">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>

  import {fmDate} from "../../utils";
  import {indexList} from "../../api/index";
  import clip from "../../utils/clipboard"
  export default {
    name:'index-list',
    components:{},
    data(){
      return{
        headerTabName:'IndexList',
        params: {
          page: {page: 1, pageSize: 10},
          sort: {order: null, sort: null}
        },
        total:0,
        indexList:[],
      }
    },
    methods:{
      formatDate(date){
        return fmDate(date,"yyyy-MM-dd hh:mm:ss")
      },
      handleCurrentChange(val){
        this.params.page.page = val;
        this.loadData();
      },
      copy(text, event) {
        clip(text, event)
      },
      async loadData(){
        console.log("params",this.params);
        let resp = await indexList(this.params);
        console.log("indexList",resp);
        if(this.qUtil.validResp(resp)){
          this.indexList = resp.data.dataList;
          this.total = resp.data.total;
        }else this.$message({ message: resp.msg, type: 'warning' });
      },
    },
    mounted(){
      this.loadData();
    }
  }

</script>
<style scoped>
</style>
